// Typography
body {
  @include body-font;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @include heading-font;
}

// Custom Horizontal Rule with Star Icon
hr.star-light,
hr.star-dark,
hr.star-grey {
  max-width: 15rem;
  padding: 0;
  text-align: center;
  border: none;
  border-top: solid 0.25rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}

hr.star-light:after,
hr.star-dark:after,
hr.star-grey:after {
  position: relative;
  top: -.8em;
  display: inline-block;
  padding: 0 0.25em;
  content: '\f005';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
}

hr.star-light {
  border-color: $white;
}
hr.star-light:after {
  color: $white;
  background-color: $primary;
}

hr.star-dark {
  border-color: $secondary;
}
hr.star-dark:after {
  color: $secondary;
  background-color: white;
}

hr.star-grey {
  border-color: $secondary;
}
hr.star-grey:after {
  color: $secondary;
  background-color: $grey;
}

// Section Padding Settings
section {
  padding: 6rem 0;
  h2 {
    font-size: 2.25rem;
    line-height: 2rem;
  }
  @media (min-width: 992px) {
    h2 {
      font-size: 3rem;
      line-height: 2.5rem;
    }
  }
}

// Custom Button Size
.btn-xl {
  padding: 1rem 1.75rem;
  font-size: 1.25rem;
}

// Custom Rounded Social Button
.btn-social {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
  line-height: 2rem;
}

// Scroll to Top Button
.scroll-to-top {
  z-index: 1042;
  right: 1rem;
  bottom: 1rem;
  display: none;
  a {
    width: 3.5rem;
    height: 3.5rem;
    background-color: fade-out($gray-900, 0.5);
    line-height: 3.1rem;
  }
}

.title-separator {
  transform: rotate(90deg);
  width: 100%;
  height: 10px;

  @media (max-width: 767px) {

    transform: rotate(0deg)

  }
}

/*!
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// Taken from PyPI Warehouse and modified
// https://github.com/pypa/warehouse/blob/master/warehouse/static/sass/blocks/_package-header.scss

.package-header {
  &__pip-instructions {
    display: inline-block;
    padding-bottom: 0;

    span {
      font-family: $code-font;
      font-weight: 500;
      font-size: 22px;
      float: left;
      background-color: transparentize($black, 0.85);
      padding: 10px;
      border: 1px dotted $transparent-white;
      line-height: $spacing-unit;

      @media only screen and (max-width: $tablet) {
        font-size: 20px;
        line-height: 25px;
      }

      @media only screen and (max-width: $mobile) {
        font-size: 18px;
        line-height: 22px;
      }
    }

    button {
      color: $white;
      line-height: $spacing-unit;
      float: left;
      cursor: pointer;
      padding: 10px ($spacing-unit / 2);
      background-color: transparentize($black, 0.85);
      border: 1px dotted $transparent-white;

      &:hover {
        background-color: transparentize($black, 0.8);
      }

      @media only screen and (max-width: $tablet) {
        line-height: 25px;
        padding: 10px;
      }

      @media only screen and (max-width: $mobile) {
        display: none;
      }
    }
  }
}
